<script>
import * as echarts from 'echarts';
import dayjs from 'dayjs';

export default {
  name: "MonitorChatPannel",
  props: {
    title: {
      type: String,
      default: '',
    },
    /**
     * 是否显示头部
     */
    showHeader: {
      type: Boolean,
      default: true
    },
    /**
     * 是否可以被选中
     */
    canCheck: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否被选中
     */
    isChecked: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 100
    },
    width: {
      type: Number,
      default: 200
    }
  },
  // eslint-disable-next-line vue/no-unused-components
  components: {  },
  data(){
    return {

    }
  },
  created() {


  },
  mounted() {
    this.init();
  },
  computed:{

  },
  methods: {
    init(){
      let chartDom = document.getElementById('chart');
      let mychart = echarts.init(chartDom);
      let xdata = []
      let ph = []
      let tn = []
      let tp = []
      for(let i=0;i<10;i++){
        xdata.push(dayjs().subtract(10 - i, 'hour').format('MM-DD HH'))
        ph.push(parseFloat((Math.random() * (8 - 7) + 7).toFixed(2)))
        tn.push(parseFloat((Math.random() * (3 - 1) + 1).toFixed(2)))
        tp.push(parseFloat((Math.random() * (2 - 1) + 1).toFixed(2)))
      }

      let option = {
        title: {show:false},
        legend: {
          show: true,
          data: ['PH']
        },
        grid: {
          top: 5,
          left: 15
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xdata
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'PH值',
            data: ph,
            type: 'line'
          },
          {
            name: '总氮',
            data: tn,
            type: 'line'
          },
          {
            name: '总磷',
            data: tp,
            type: 'line'
          }
        ]
      };
      mychart.setOption(option);
    }

  },
};
</script>

<template>
  <div
      class="base-panel-container"
      :style="{ height: height, width: width, minHeight: '130px' }"
  >
    <div class="base-panel-common-bg"/>
    <div class="base-panel-panel-content">
      <div v-if="showHeader" class="base-panel-top-title">
        <div class="base-panel-text-box">
          <slot name="title">
            <span>{{ title }}</span>
          </slot>
        </div>
        <div>
          <slot name="rightTitle"/>
        </div>
      </div>
      <div class="base-panel-content">
        <template v-if="canCheck">
          <div style="cursor: pointer" :class="{ 'base-panel-checked': isChecked }">
            <slot name="default"/>
          </div>
          <div id="chart" style="width: 450px;height:250px"></div>
        </template>
        <template v-else>
          <slot name="default"/>

        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.base-panel-container {
  z-index: 10;
  top: 520px;
  left: 40px;
  color: white;
  width: 200px;
  .base-panel-panel-content {
    width: 400px;
    position: absolute;
    font-size: 14px;
    table {

    }
  }

}

</style>